<template>
    <div>
        <div class="pc_wrap" v-if="innerWidth > 500">
            <!-- 头图 -->
            <div class="pc_top u-flex u-flex-col u-col-top u-row-center">
                <div class="pc_width">
                    <div class="pc_cont">
                        <img src="../../image/russiaNum/6.png" class="top_img">
                        <div class="top_bold">开启中俄贸易新航道</div>
                        <div class="top_bor">一站式服务，带你抢占对俄市场先机！</div>
                    </div>
                </div>
            </div>

            <!-- 内容 -->
            <div class="pc_bot">
                <div class="pc_width">
                    <div class="bot_tit">
                        <text
                            class="text">俄数通</text>—以创新驱动、专业领航，成为驱动双边贸易蓬勃发展的关键力量。其独具一格的推广优势，为企业开拓对俄市场铺就了一条高速通路，让对俄贸易优势尽显。
                        <text
                            v-if="innerWidth > 1500">我们作为对俄贸易领域的领航者，匠心打造一站式服务平台，携手小白零基础托管服务，为您铺设一条通往俄罗斯市场的快速通道，让您的全球贸易梦想触手可及。</text>
                    </div>
                    <!-- 平行四边形 -->
                    <div class="u-flex u-row-between">
                        <div class="bot_ping bot_blue">海外仓储</div>
                        <div class="bot_ping bot_pink">畅通结算</div>
                        <div class="bot_ping bot_zi">跨境电商</div>
                        <div class="bot_ping bot_yellow">数据分析</div>
                        <div class="bot_ping bot_green">报关物流</div>
                    </div>
                    <!-- 俄数通—全方位服务护航，降低运营风险 -->
                    <div class="bot_img_tit">
                        <img src="@/image/russiaNum/H5-2.png" alt="">
                        俄数通—全方位服务护航，降低运营风险
                        <img src="@/image/russiaNum/H5-2.png" alt="">
                    </div>
                    <div class="bot_grey">一站式服务平台：全方位赋能，高效便捷。</div>
                    <div class="bot_grey bot_xian">精准的供需匹配、政策法规指导、高效物流支持、贸易金融助力、安全的支付体系</div>
                    <div class="bot_one u-flex u-row-between">
                        <img src="@/image/russiaNum/3.png" class="one_img">
                        <div class="one_rig">
                            <div class="one u-flex" v-for="item in innerWidth > 1500 ? listP1 : list1">
                                <img src="@/image/russiaNum/H5-3.png">{{ item }}
                            </div>
                        </div>
                    </div>
                    <!-- 俄数通一精准数据洞察，抢占市场先机 -->
                    <div class="bot_img_tit">
                        <img src="@/image/russiaNum/H5-2.png" alt="">
                        俄数通一精准数据洞察，抢占市场先机
                        <img src="@/image/russiaNum/H5-2.png" alt="">
                    </div>
                    <div class="bot_two u-flex u-flex-wrap u-row-between">
                        <div class="two" v-for="item in list2">
                            <div class="two_tit">{{ item.title }}</div>
                            <div class="two_cont">{{ innerWidth > 1500 ? item.cont2 : item.cont }}</div>
                        </div>
                    </div>
                    <!-- 俄数通一品牌推广助力，塑造国际形象 -->
                    <div class="bot_img_tit">
                        <img src="@/image/russiaNum/H5-2.png" alt="">
                        俄数通一品牌推广助力，塑造国际形象
                        <img src="@/image/russiaNum/H5-2.png" alt="">
                    </div>
                    <div class="bot_thr u-flex u-row-between">
                        <div class="thr_left">
                            <div class="three u-flex u-col-top" v-for="item in innerWidth > 1500 ? listP3 : list3">
                                <img src="@/image/russiaNum/H5-5.png" class="left_img">
                                <div class="left_text ">{{ item }}</div>
                            </div>
                        </div>
                        <img src="@/image/russiaNum/4.png" class="thr_img">
                    </div>
                </div>
            </div>
            <Foot></Foot>
        </div>
        <div v-else>
            <div class="top">
                <img src="@/image/russiaNum/H5-4.png" class="tit">
                <div class="text">
                    开启中俄贸易新航道<br> 一站式服务，带你抢占对俄市场先机！
                </div>
            </div>
            <!-- 圆 -->
            <div class="radius u-flex u-row-between">
                <div class="rad_item back1">海外<br>仓储</div>
                <div class="rad_item back2">畅通<br>结算</div>
                <div class="rad_item back3">跨境<br>电商</div>
                <div class="rad_item back4">报告<br>分析</div>
            </div>
            <div class="tip">
                俄数通—以创新驱动、专业领航，成为驱动双边贸易蓬勃发展的关键力量。其独具一格的推广优势，为企业开拓对俄市场铺就了一条高速通路，让对俄贸易优势尽显。
            </div>
            <div class="bottom">
                <!-- 俄数通—全方位服务护航，降低运营风险 -->
                <div class="u-flex bot_tit">
                    <img src="@/image/russiaNum/H5-2.png" alt="">
                    俄数通—全方位服务护航，降低运营风险
                </div>
                <div class="bot_cont">
                    <div class="grey">一站式服务平台：全方位赋能，高效便捷。</div>
                    <div class="xian">精准的供需匹配、政策法规指导、高效物流支持、贸易金融助力、安全的支付体系</div>
                </div>
                <div class="one u-flex" v-for="item in list1">
                    <img src="@/image/russiaNum/H5-3.png" alt="">{{ item }}
                </div>
                <!-- 俄数通一精准数据洞察，抢占市场先机 -->
                <div class="u-flex bot_tit">
                    <img src="@/image/russiaNum/H5-2.png" alt="">
                    俄数通一精准数据洞察，抢占市场先机
                </div>
                <div class="two" v-for="item in list2">
                    <div class="two_tit">{{ item.title }}</div>
                    <div class="two_cont">{{ item.cont }}</div>
                </div>
                <!-- 俄数通一品牌推广助力，塑造国际形象 -->
                <div class="u-flex bot_tit">
                    <img src="@/image/russiaNum/H5-2.png" alt="">
                    俄数通一品牌推广助力，塑造国际形象
                </div>
                <div class="three u-flex u-col-top" v-for="item in list3">
                    <img src="@/image/russiaNum/H5-5.png" alt="">
                    <div class="thr_cont">{{ item }}</div>
                </div>
                <!-- 答疑 -->
                <div class="four">
                    <div class="u-flex u-row-between">
                        <img src="@/image/russiaNum/H5-2.png" alt="">
                        俄罗斯市场迷雾重重?
                        <img src="@/image/russiaNum/H5-2.png" alt="">
                    </div>
                    <div class="fou_cont">我们的咨询服务，为你精准导航!<br>
                        想深入俄罗斯市场?<br>
                        专业对俄咨询，一手资源助你轻松布局!<br>
                        进军俄罗斯，不知从何下手?<br>
                        专业对俄咨询为你量身定制方案!<br>
                        开拓俄罗斯业务遇阻?<br>
                        我们的对俄咨询团队，为你排忧解难!<br>
                        对俄贸易新征程，俄数通是你的得力伙伴!<br>
                    </div>
                </div>
                <!-- 联系 -->
                <div class="five">
                    点击图片长按立即咨询，开启财富新篇!
                    <div class="code" @click="dialogPho = true">
                        <img src="@/image/russiaNum/H5-6.png" alt="">
                    </div>
                </div>
            </div>
        </div>
        <el-dialog width="100%" :show-close="false" v-model="dialogPho">
            <img src="@/image/russiaNum/H5-6.png" style="width:100%">
            <div class="pop_tip">长按识别添加客服</div>
        </el-dialog>
    </div>
</template>

<script>
import {
    useStore
} from 'vuex';
import { ref, watch, computed, getCurrentInstance } from "vue";

export default {
    data() {
        return {
            imgUrl: '',
            store: '',
            dialogPho: false,
            listP1: ['智能大数据分析，精准推送供应商或采购商信息，实现中俄企业供需的即时精准匹配。', '两国贸易政策法规专业团队，实时跟踪政策动态，确保贸易活动合法合规、平稳有序。', '高效物流体系可视化追踪，针对中俄贸易特点量身定制物流方案让货物安全准时抵达。', '自有中俄结算渠道，降低中俄贸易结算中的汇率波动风险，助力企业贸易活动业务拓展。', '银行监管账户，搭建安全便捷的支付体系，为中俄贸易企业提供一站式贸易金融服务。'],

            list1: ['智能大数据分析，精准推送供应商或采购商信息。', '两国贸易政策法规的专业团队，实时跟踪政策动态。', '高效物流体系，可视化追踪，让货物安全准时抵达。', '中俄贸易结算中的汇率波动风险，助力业务拓展。', '结合银行监管账户，搭建安全便捷的支付体系。'],
            list2: [
                {
                    title: '海量多维数据采集',
                    cont: '平台运用前沿的数据采集技术，广泛汇聚中俄两国经济、贸易、产业、消费等全方位信息。',
                    cont2: '平台运用前沿的数据采集技术，广泛汇聚中俄两国经济、贸易、产业、消费等全方位信息。从俄罗斯各联邦主体的宏观经济指标、进出口数据，到细分行业的市场规模、企业活跃度，再到俄罗斯消费者的购物习惯、地域偏好、年龄分布等微观洞察，无一遗漏。'
                },
                {
                    title: '深度数据分析模型',
                    cont: '依托专业的数据科学家团队与先进算法，构建深度数据分析模型。能够实时跟踪俄罗斯市场动态，预测行业走势。',
                    cont2: '依托专业的数据科学家团队与先进算法，构建深度数据分析模型。能够实时跟踪俄罗斯市场动态，预测行业走势，助力中国相关企业提前筹备产能、调配资源；精准识别潜在商业机会，为企业提供个性化的市场切入建议，确保您的产品或服务一经推出就能直击俄方需求痛点，快人一步扎根市场。',
                },
                {
                    title: '供需智能匹配引擎',
                    cont: '凭借强大的 AI引擎，俄数通打破传统贸易的信息壁垒，实现中俄企业供需的即时精准匹配。',
                    cont2: '凭借强大的 AI 引擎，俄数通打破传统贸易的信息壁垒，实现中俄企业供需的即时精准匹配。将双方需求详情精准推送，省去繁琐的人工搜索与反复沟通，让合作洽谈一蹴而就，大大缩短从意向到签约的时间周期。',
                },
                {
                    title: '实时交互功能加持',
                    cont: '内置便捷的实时通讯工具，支持中俄双语实时互译，无论你身处北京还是莫斯科，均可与对方无障碍沟通交流。',
                    cont2: '内置便捷的实时通讯工具，支持中俄双语实时互译，无论您身处北京还是莫斯科，均可与对接方无障碍沟通交流。配合视频会议功能，即使面对复杂的技术细节探讨或商务条款协商，面对面解决问题，确保交易推进顺畅无阻，真正实现跨时空协同。',
                }
            ],
            list3: ['搭建俄罗斯主流媒体、行业垂直网站、社交媒体网红等多元化的跨境媒体矩阵;', '积极组织参与中俄各类线上线下贸易展会与活动，实现线上线下联动推广;', '借助展会的集聚效应，拓展人脉资源，助力品牌扎根俄罗斯市场。'],
            listP3: ['搭建涵盖俄罗斯主流媒体、行业垂直网站、社交媒体网红等多元化的跨境媒体矩阵，全方位提升平台入驻企业的品牌曝光度。通过专题报道、产品展示、案例分享等形式，将中国企业的优质产品与服务推向俄罗斯受众视野，让品牌形象深入人心;', '积极组织参与中俄各类线上线下贸易展会与活动，实现线上线下联动推广。线上举办虚拟展览，打破时空限制，让俄罗斯采购商随时随地浏览中国企业展品；线下则组织企业参加实体展会;', '借助展会的集聚效应，拓展人脉资源，助力品牌扎根俄罗斯市场，与俄罗斯知名科技媒体合作，报道中国软件企业创新成果，引发当地行业关注，吸引大量潜在客户主动咨询合作。'],
        };
    },
    created() {
        const { appContext } = getCurrentInstance();
        this.imgUrl = appContext.config.globalProperties.$imgUrl;
        this.store = useStore();
        this.innerWidth = window.innerWidth

        let appid = 'wxbc5fc509623518be'
        let redirect_uri = encodeURIComponent(window.location.href)

        const hasRedirected = localStorage.getItem('hasRedirected');
        const token = localStorage.getItem('token');

        if (!token) {//判断是否登录过，没登录走

            if (!hasRedirected) {//进页面只一次跳走登录（不加反复跳页面）
                localStorage.setItem('hasRedirected', 'true');
                window.location.href = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=' + appid + '&redirect_uri=' + redirect_uri + '&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect'
            } else {
                // 登录接口
                const code = this.extractCodeValue(window.location.href);
                this.store.dispatch("home/loginWxOfficialApi", {
                    code: code,
                    state: 'STATE',
                }).then(res => {
                    if (res.status == 200) {
                        localStorage.setItem('token', res.data.token)
                    }
                })
            }
        }
    },
    methods: {
        // 截取code
        extractCodeValue(str) {
            const startIndex = str.indexOf('code=');
            if (startIndex === -1) {
                return null;
            }
            const newStartIndex = startIndex + 'code='.length;
            const endIndex = str.indexOf('&', newStartIndex);
            return endIndex === -1 ? str.slice(newStartIndex) : str.slice(newStartIndex, endIndex);
        }
    }
};
</script>

<style scoped lang="less">
@media screen and (max-width: 1920px) {
    .pc_wrap {
        .pc_width {
            width: 1200px !important;
        }

        .pc_top {

            .pc_cont {
                width: 400px !important;

                .top_img {
                    width: 400px !important;
                }

                .top_bold {
                    font-size: 24px !important;
                    letter-spacing: 10px !important;
                    margin-top: 10px !important;
                }

                .top_bor {
                    width: 300px !important;
                    font-size: 16px !important;
                    padding: 6px 0 !important;
                    margin-top: 10px !important;
                }
            }
        }


        .pc_bot {
            aspect-ratio: 16/16 !important;
            padding-top: 40px !important;

            .bot_tit {
                font-size: 14px !important;
                padding: 11px 50px 17px !important;
                margin-bottom: 40px !important;

                .text {
                    font-size: 20px !important;
                    line-height: 36px !important;
                }
            }

            .bot_ping {
                height: 80px !important;
                font-size: 34px !important;
                letter-spacing: 3px !important;
            }

            .bot_img_tit {
                width: 52% !important;
                padding-top: 40px !important;
                font-size: 24px !important;

                img {
                    width: 50px !important;
                }
            }

            .bot_grey {
                font-size: 16px !important;
            }

            .bot_one {

                .one_img {
                    width: 47% !important;
                }

                .one_rig {
                    width: 49% !important;

                    .one {
                        font-size: 14px !important;
                        margin-bottom: 12px !important;
                        padding: 8px 0 6px 10px !important;

                        img {
                            width: 23px !important;
                        }
                    }
                }
            }

            .bot_two {

                .two {
                    .two_tit {
                        font-size: 24px !important;
                    }

                    .two_cont {
                        font-size: 16px !important;
                        padding: 30px 35px !important;
                        line-height: 25px !important;
                    }
                }
            }

            .bot_thr {

                .thr_left {

                    .three {
                        margin-bottom: 20px !important;

                        .left_img {
                            width: 26px !important;
                            margin: 4px 15px 0 0 !important;
                        }

                        .left_text {
                            font-size: 16px !important;
                            line-height: 28px !important;
                        }
                    }
                }
            }
        }
    }
}

@media screen and (max-width: 1750px) {
    .pc_wrap {
        .pc_width {
            width: 1000px !important;
        }

        .pc_top {

            .pc_cont {
                width: 350px !important;
                padding-top: 40px !important;

                .top_img {
                    width: 350px !important;
                }

                .top_bold {
                    font-size: 22px !important;
                    letter-spacing: 7px !important;
                    margin-top: 6px !important;
                }

                .top_bor {
                    width: 260px !important;
                    font-size: 14px !important;
                }
            }
        }


        .pc_bot {
            aspect-ratio: 16/15 !important;

            .bot_tit {
                font-size: 12px !important;
                padding: 9px 40px 15px !important;
                margin-bottom: 40px !important;

                .text {
                    font-size: 18px !important;
                }
            }

            .bot_ping {
                height: 70px !important;
                font-size: 30px !important;
            }

            .bot_img_tit {
                width: 54% !important;
                padding-top: 40px !important;
                font-size: 22px !important;

                img {
                    width: 45px !important;
                }
            }

            .bot_grey {
                font-size: 15px !important;
            }

            .bot_xian {
                margin-top: 8px !important;
                text-underline-offset: 10px !important;
            }

            .bot_one {
                padding-top: 50px !important;

                .one_img {
                    width: 46% !important;
                }

                .one_rig {
                    width: 51% !important;

                    .one {
                        font-size: 12px !important;
                        padding: 6px 0 6px 8px !important;

                        img {
                            width: 20px !important;
                        }
                    }
                }
            }

            .bot_two {

                .two {
                    margin-top: 36px !important;

                    .two_tit {
                        font-size: 18px !important;
                        height: 30px !important;
                    }

                    .two_cont {
                        font-size: 14px !important;
                        height: 160px !important;
                        padding: 25px 35px !important;
                        line-height: 21px !important;
                        text-indent: 29px !important;
                    }
                }
            }

            .bot_thr {

                .thr_left {

                    .three {

                        .left_img {
                            width: 22px !important;
                            margin: 3px 15px 0 0 !important;
                        }

                        .left_text {
                            font-size: 14px !important;
                            line-height: 24px !important;
                        }
                    }
                }
            }
        }
    }
}

@media screen and (max-width: 1500px) {
    .pc_wrap {
        .pc_width {
            width: 900px !important;
        }

        .pc_top {

            .pc_cont {
                width: 330px !important;
                padding-top: 50px !important;

                .top_img {
                    width: 330px !important;
                }

                .top_bold {
                    font-size: 20px !important;
                    letter-spacing: 5px !important;
                    margin-top: 5px !important;
                }

                .top_bor {
                    width: 220px !important;
                    font-size: 12px !important;
                    padding: 5px 0 !important;
                    margin-top: 8px !important;
                }
            }
        }


        .pc_bot {
            aspect-ratio: 16/16 !important;

            .bot_tit {
                font-size: 14px !important;
            }

            .bot_ping {
                height: 60px !important;
                font-size: 26px !important;
            }

            .bot_img_tit {
                width: 54% !important;
                padding-top: 35px !important;
                font-size: 20px !important;

                img {
                    width: 40px !important;
                }
            }

            .bot_grey {
                font-size: 14px !important;
            }

            .bot_xian {
                margin-top: 8px !important;
                text-underline-offset: 8px !important;
            }

            .bot_one {
                padding-top: 50px !important;

                .one_img {
                    width: 48% !important;
                }

                .one_rig {
                    width: 45% !important;

                    .one {
                        font-size: 14px !important;

                        img {
                            width: 23px !important;
                        }
                    }
                }
            }

            .bot_two {

                .two {
                    margin-top: 36px !important;

                    .two_tit {
                        height: 35px !important;
                    }

                    .two_cont {
                        font-size: 15px !important;
                        height: 130px !important;
                        line-height: 24px !important;
                    }
                }
            }

            .bot_thr {

                .thr_left {

                    .three {

                        .left_img {
                            width: 23px !important;
                            margin: 0px 10px 0 0 !important;
                        }

                        .left_text {
                            font-size: 15px !important;
                        }
                    }
                }
            }
        }
    }
}

@media screen and (max-width: 1250px) {
    .pc_wrap {
        .pc_width {
            width: 800px !important;
        }

        .pc_top {

            .pc_cont {
                width: 300px !important;

                .top_img {
                    width: 300px !important;
                }

                .top_bold {
                    font-size: 18px !important;
                    margin-top: 0px !important;
                }

                .top_bor {
                    width: 200px !important;
                    font-size: 11px !important;
                    padding: 4px 0 !important;
                    margin-top: 5px !important;
                }
            }
        }


        .pc_bot {
            aspect-ratio: 16/18 !important;

            .bot_ping {
                height: 55px !important;
                font-size: 22px !important;
            }

            .bot_img_tit {
                width: 56% !important;
                padding-top: 30px !important;
                font-size: 18px !important;

                img {
                    width: 35px !important;
                }
            }

            .bot_one {
                padding-top: 40px !important;
            }

            .bot_two {

                .two {
                    margin-top: 30px !important;

                    .two_tit {
                        font-size: 16px !important;
                    }

                    .two_cont {
                        font-size: 14px !important;
                        height: 120px !important;
                        padding: 20px 35px !important;
                    }
                }
            }

            .bot_thr {

                .thr_left {

                    .three {
                        margin-bottom: 15px !important;

                        .left_text {
                            font-size: 14px !important;
                        }
                    }
                }
            }
        }
    }
}

@media screen and (max-width: 1100px) {
    .pc_wrap {
        .pc_width {
            width: 600px !important;
        }

        .pc_top {

            .pc_cont {
                width: 280px !important;

                .top_img {
                    width: 280px !important;
                }

                .top_bold {
                    font-size: 16px !important;
                    letter-spacing: 4px !important;
                }

                .top_bor {
                    width: 180px !important;
                    font-size: 10px !important;
                }
            }
        }


        .pc_bot {
            padding-top: 30px !important;

            .bot_tit {
                font-size: 13px !important;
                padding: 6px 40px 13px !important;
                margin-bottom: 30px !important;

                .text {
                    font-size: 16px !important;
                    line-height: 34px !important;
                }
            }

            .bot_ping {
                height: 50px !important;
                font-size: 18px !important;
                letter-spacing: 1px !important;
            }

            .bot_img_tit {
                width: 65% !important;
                padding-top: 30px !important;
                font-size: 16px !important;

                img {
                    width: 32px !important;
                }
            }

            .bot_grey {
                font-size: 13px !important;
            }

            .bot_xian {
                text-underline-offset: 6px !important;
            }

            .bot_one {
                padding-top: 35px !important;

                .one_img {
                    width: 45% !important;
                }

                .one_rig {
                    width: 50% !important;

                    .one {
                        font-size: 11px !important;
                        border-radius: 10px !important;
                        margin-bottom: 8px !important;
                        padding: 4px 0 4px 6px !important;

                        img {
                            width: 20px !important;
                            margin-right: 3px !important;
                        }
                    }
                }
            }

            .bot_two {

                .two {
                    margin-top: 25px !important;

                    .two_tit {
                        font-size: 15px !important;
                        padding-left: 15px !important;
                        padding-top: 8px !important;
                    }

                    .two_cont {
                        font-size: 13px !important;
                        height: 120px !important;
                        padding: 12px 25px 0 !important;
                        line-height: 22px !important;
                        text-indent: 26px !important;
                    }
                }
            }

            .bot_thr {

                .thr_left {

                    .three {
                        margin-bottom: 13px !important;

                        .left_text {
                            font-size: 13px !important;
                            line-height: 22px !important;
                        }
                    }
                }
            }
        }
    }
}


@media screen and (max-width: 950px) {
    .pc_wrap {

        .pc_top {

            .pc_cont {
                width: 250px !important;
                padding-top: 30px !important;

                .top_img {
                    width: 250px !important;
                }

                .top_bold {
                    font-size: 14px !important;
                    letter-spacing: 3px !important;
                }

                .top_bor {
                    width: 160px !important;
                    font-size: 9px !important;
                }
            }
        }
    }
}

// pc
.pc_wrap {
    .pc_width {
        width: 1440px;
        margin: 0 auto;
    }

    .pc_top {
        aspect-ratio: 16/4;
        background-image: url("../../image/russiaNum/1-1.png");
        /* 背景图片覆盖整个元素 */
        background-size: 100% 100%;
        /* 背景图片不重复 */
        background-repeat: no-repeat;

        .pc_cont {
            width: 500px;
            text-align: center;
            padding-top: 80px;

            .top_img {
                width: 500px;
            }

            .top_bold {
                color: #0671fc;
                font-weight: bold;
                font-size: 30px;
                letter-spacing: 15px;
                margin-top: 20px;
            }

            .top_bor {
                width: 400px;
                margin: 0 auto;
                color: #026ffc;
                border: 2px solid #026ffc;
                border-radius: 25px;
                font-size: 22px;
                font-weight: bold;
                padding: 8px 0;
                box-sizing: border-box;
                margin-top: 20px;
            }
        }
    }

    .pc_bot {
        aspect-ratio: 16/14;
        background-image: url("../../image/russiaNum/2.png");
        /* 背景图片覆盖整个元素 */
        background-size: 100% 100%;
        /* 背景图片不重复 */
        background-repeat: no-repeat;
        padding-top: 50px;

        .bot_tit {
            width: 100%;
            font-size: 16px;
            padding: 17px 70px 22px;
            border-radius: 50px;
            margin-bottom: 50px;
            box-shadow: 0px 5px 3px 0px #8593c2;
            background: linear-gradient(to bottom, #FFF, #a6c5fc);
            color: #333;

            .text {
                color: #026ffc;
                font-size: 22px;
                font-weight: bold;
                line-height: 42px;
            }
        }

        .bot_ping {
            width: 20%;
            height: 90px;
            color: #fff;
            display: flex;
            font-size: 38px;
            font-style: italic;
            font-weight: bold;
            letter-spacing: 5px;
            align-items: center;
            justify-content: center;
            clip-path: polygon(10% 0%, 100% 0%, 90% 100%, 0% 100%);
        }

        .bot_blue {
            background: #377ff5;
        }

        .bot_pink {
            background: #e970a0;
        }

        .bot_zi {
            background: #9d66c4;
        }

        .bot_yellow {
            background: #f9c323;
        }

        .bot_green {
            background: #b8cb4a;
        }

        .bot_img_tit {
            width: 50%;
            margin: 0 auto;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding-top: 50px;
            color: #026ffc;
            font-size: 28px;
            font-weight: bold;

            img {
                width: 55px;
            }
        }

        .bot_grey {
            text-align: center;
            font-size: 20px;
            margin-top: 5px;
            color: #333;
        }

        .bot_xian {
            color: #4e92f8;
            margin-top: 10px;
            text-decoration: underline;
            text-underline-offset: 12px;
        }

        .bot_one {
            padding-top: 60px;

            .one_img {
                width: 49%;
            }

            .one_rig {
                width: 47%;

                .one {
                    color: #3e8bf8;
                    font-size: 16px;
                    border-radius: 25px;
                    margin-bottom: 14px;
                    background: #d4e4fb;
                    padding: 8px 0 6px 20px;

                    img {
                        width: 26px;
                        margin-right: 5px;
                    }
                }
            }
        }

        .bot_two {

            .two {
                width: 48%;
                aspect-ratio: 16/6;
                background-image: url("../../image/russiaNum/5.png");
                background-size: 100% 100%;
                background-repeat: no-repeat;
                margin-top: 50px;

                .two_tit {
                    color: #026ffc;
                    font-size: 25px;
                    padding-left: 38px;
                    font-weight: bold;
                    height: 50px;
                    padding-top: 10px;
                }

                .two_cont {
                    color: #333;
                    font-size: 17px;
                    height: 200px;
                    padding: 40px;
                    line-height: 26px;
                    text-indent: 33px;
                }
            }
        }

        .bot_thr {
            padding-top: 20px;

            .thr_left {
                width: 60%;

                .three {
                    margin-bottom: 25px;

                    .left_img {
                        width: 30px;
                        margin: 6px 20px 0 0;
                    }

                    .left_text {
                        color: #333;
                        font-size: 17px;
                        line-height: 30px;
                    }
                }
            }

            .thr_img {
                width: 35%;
            }
        }
    }
}

// 手机端
.top {
    aspect-ratio: 16/29;
    background-image: url("../../image/russiaNum/H5-1.png");
    /* 背景图片覆盖整个元素 */
    background-size: 100% 100%;
    /* 背景图片不重复 */
    background-repeat: no-repeat;
    text-align: center;

    .tit {
        width: 78%;
        margin-top: 35px;
    }

    .text {
        width: 78%;
        border-radius: 16px;
        color: #fff;
        margin: 15px auto;
        line-height: 23px;
        font-weight: bold;
        padding: 1px 0;
        font-size: 15px;
        background: linear-gradient(to bottom, #96bdf7, #5096f9);
    }
}

.radius {
    width: 80%;
    margin: 0 auto;
    margin-top: -80px;

    .rad_item {
        width: 66px;
        height: 66px;
        border-radius: 50%;
        background: pink;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        line-height: 20px;
        font-weight: bold;
        box-shadow: 0px 4px 4px 1px rgba(0, 0, 0, 0.16);
    }

    .back1 {
        background: #ffba13;
    }

    .back2 {
        background: #00a0e9;
    }

    .back3 {
        background: #ff0068;
    }

    .back4 {
        background: #f29b76;
    }
}

.tip {
    width: 90%;
    color: #026ffc;
    margin: 0 auto;
    background: #e7f0fd;
    margin-top: 30px;
    border-radius: 15px;
    line-height: 22px;
    padding: 10px 16px;
    box-sizing: border-box;
}

.bottom {
    width: 88%;
    margin: 0 auto;

    .bot_tit {
        color: #026ffc;
        font-weight: bold;
        margin: 35px 0 15px 0;

        img {
            width: 35px;
            margin-right: 10px;
        }
    }

    .bot_cont {
        padding: 0 20px;
        margin-bottom: 20px;

        .grey {
            color: #313131;
        }

        .xian {
            color: #4e92f8;
            line-height: 28px;
            margin-top: 3px;
            text-decoration: underline;
            text-underline-offset: 8px;
        }
    }

    .one {
        color: #3e8bf8;
        font-size: 13px;
        border-radius: 20px;
        margin-bottom: 7px;
        background: #e5f0ff;
        padding: 4px 7px;

        img {
            width: 25px;
            margin-right: 5px;
        }
    }

    .two {
        margin-bottom: 10px;

        .two_tit {
            color: #026ffc;
            font-weight: bold;
            margin-bottom: 5px;
            font-size: 15px;
        }

        .two_cont {
            line-height: 20px;
            font-size: 14px;
            color: #313131;

        }
    }

    .three {

        img {
            width: 10px;
            margin-right: 8px;
            margin-top: 8px;
        }

        .thr_cont {
            line-height: 25px;
            font-size: 15px;
            color: #313131;

        }
    }

    .four {
        width: 100%;
        margin-top: 30px;
        font-weight: bold;
        text-align: center;
        font-size: 15px;

        img {
            width: 35px;
        }

        .fou_cont {
            line-height: 26px;
        }
    }

    .five {
        color: #3e8bf8;
        font-weight: bold;
        text-align: center;
        margin-top: 30px;
        padding-bottom: 30px;
        font-size: 15px;

        .code {
            width: 120px;
            height: 120px;
            margin: 0 auto;
            margin-top: 16px;
            border-radius: 5px;
            border: 3px solid #3e8bf8;

            img {
                width: 100%;
                height: 100%;
                border-radius: 5px;
            }
        }
    }
}

.pop_tip {
    color: #fff;
    font-size: 17px;
    text-align: center;
    padding-top: 10px;
}
</style>
